<!-- 查询包租佬用电查询 -->
<template>
  <el-drawer direction="rtl" v-model="dialogVisible" :title="dialogTitle" size="90%">
    <!-- 列表 -->
    <ContentWrap>
      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
        <el-table-column label="操作时间" align="center" prop="createTime" width="180">
          <template #default="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="类型" align="center" prop="operType" width="120" />
        <el-table-column label="内容" align="left" prop="remark" />
      </el-table>
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>
  </el-drawer>
</template>
<script lang="ts" setup>
import { getMeterOperLogPage } from '@/api/zwsj/meterOperLog'
import { formatDate } from '@/utils/formatTime'

defineOptions({ name: 'MeterOperLogQuery' })

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref() // 列表的数据

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  meterId: undefined
})

/** 打开弹窗 */
const open = async (meterId: number) => {
  loading.value = false
  dialogVisible.value = true
  dialogTitle.value = '电表操作记录查询'
  queryParams.meterId = meterId
  handleQuery()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const queryFormRef = ref() // 搜索的表单

/** 查询部门列表 */
const getList = async () => {
  loading.value = true
  const data = await getMeterOperLogPage(queryParams)
  list.value = data.list
  total.value = data.total
  loading.value = false
}

/** 搜索按钮操作 */
const handleQuery = () => {
  getList()
}
</script>
